<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <title>小说写作助手</title>
    <link rel="stylesheet" href="css/style.css" />
</head>
<body>
<header>
    <h1>小说写作助手</h1>
    <p>记录人物、地点、大纲、笔记和思路</p>
</header>

<div class="container">
    <div class="card">
        <h2>人物管理</h2>
        <input id="characterInput" placeholder="角色姓名、身份等" />
        <button onclick="addItem('characters')">添加人物</button>
        <ul id="characters"></ul>
    </div>

    <div class="card">
        <h2>地点管理</h2>
        <input id="locationInput" placeholder="地点名称、背景设定等" />
        <button onclick="addItem('locations')">添加地点</button>
        <ul id="locations"></ul>
    </div>

    <div class="card">
        <h2>章节大纲</h2>
        <textarea id="outlineInput" rows="5" placeholder="输入本章大致内容..."></textarea>
        <button onclick="addItem('outlines')">添加大纲</button>
        <ul id="outlines"></ul>
    </div>

    <div class="card">
        <h2>写作笔记</h2>
        <textarea id="notesInput" rows="5" placeholder="记录灵感、修改思路、细节补充..."></textarea>
        <button onclick="addItem('notes')">添加笔记</button>
        <ul id="notes"></ul>
    </div>

    <div class="card">
        <h2>写作思路记录</h2>
        <textarea id="thoughtsInput" rows="5" placeholder="记录主线发展、人物命运、转折点等..."></textarea>
        <button onclick="addItem('thoughts')">添加思路</button>
        <ul id="thoughts"></ul>
    </div>

    <!-- 在 container 最后新增 -->
    <div class="card" style="flex: 1 1 100%;">
        <h2>操作面板</h2>
        <button onclick="saveToFile()">导出内容为JSON文件</button>
        <input type="file" onchange="loadFromFile(event)" />
        <p style="color: gray; font-size: 0.9em;">将自动保存内容到浏览器本地（localStorage）。</p>
    </div>

</div>

<script src="js/script.js"></script>
</body>
</html>
